<template>
  <div id="number">
    <div v-if="identity==='大陆'">
      <!--<divider v-text="'请输入您的二代身份证号码'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="请输入您的二代身份证号码" :is-type="_isCardNo"></x-input>
      </group>
      <!-- <div class="button-wrapper">
        <x-button type="primary" :disabled="checkDisabled" @click.native="next()">下一步</x-button>
      </div> -->
      <div class="button_header fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next('001')" style="color:#fff;font-size: 18px;" slot="right">
            下一步
          </div>
        </x-header>
        <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
      </div>

      <!-- <div class="fixBottomButton" id='x-bottom'>
        <x-header @click.native='next()' slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
          <span slot="overwrite-left">

          </span>
          <a>下一步/Next</a>
        </x-header>
      </div> -->
    </div>

    <div v-if="identity==='香港'">
      <!-- <divider v-text="'請輸入您的香港/澳門居住證號'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="請輸入您的香港居民往來大陸通行證" :is-type="_isHKMacao"></x-input>
      </group>
      <!-- <div class="button-wrapper">
        <x-button type="primary" :disabled="checkDisabled" @click.native="next()">下壹步</x-button>
      </div> -->
      <div class="fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next('001081')" style="color:#fff;font-size: 18px;" slot="right">
            下一步
          </div>
        </x-header>
      </div>
    </div>

    <div v-if="identity==='澳门'">
      <!-- <divider v-text="'請輸入您的香港/澳門居住證號'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="請輸入您的澳门居民往来大陸通行證" :is-type="_isHKMacao"></x-input>
      </group>
      <!-- <div class="button-wrapper">
        <x-button type="primary" :disabled="checkDisabled" @click.native="next()">下壹步</x-button>
      </div> -->
      <div class="fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next('001081')" style="color:#fff;font-size: 18px;" slot="right">
            下一步
          </div>
        </x-header>
      </div>
    </div>

    <div v-if="identity==='台湾'">
      <!--<divider v-text="'請輸入您的臺灣居住證號'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="請輸入您的臺灣居民往来大陸通行證" :is-type="_isTaiwan"></x-input>
      </group>
      <!-- <div class="button-wrapper">
        <x-button type="primary" :disabled="checkDisabled" @click.native="next()">下壹步
        </x-button>
      </div> -->
      <div class="button_header fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next('001071')" style="color:#fff;font-size: 18px;" slot="right">
            下一步
          </div>
        </x-header>
        <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
      </div>
      <!-- <div class="fixBottomButton" id='x-bottom'>
        <x-header @click.native='next()' slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
          <span slot="overwrite-left">

          </span>
          <a>下一步/Next</a>
        </x-header>
      </div> -->
    </div>

    <div v-if="identity==='外国'&&!pcOnlineNational">
      <!--<divider v-text="'Please enter your passport number'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="Please enter your passport number" :is-type="_isPassport"></x-input>
        <popup-picker :title="titleNationality" :data="nationalList" cancel-text="cancel" confirm-text="confirm" :show-name="true" v-model="national" placeholder="please select"></popup-picker>
      </group>
      <div class="fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next(0)" style="color:#fff;font-size: 18px;" slot="right">
            Next step
          </div>
        </x-header>
      </div>
    </div>
    <!--国籍PC-->
    <div v-if="identity==='外国'&&pcOnlineNational">
      <!--<divider v-text="'Please enter your passport number'"></divider>-->
      <group>
        <x-input v-model="IDNumber" placeholder="Please enter your passport number" :is-type="_isPassport"></x-input>
        <selector :title="titleNationality" @on-change="onChangePC" :options="countryDataPC"></selector>
      </group>
      <div class="fixBottomButton" id='x-bottom'>
        <x-header slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition">
          <div slot="overwrite-left"></div>
          <div class="rightbottom-button" @click="next(0)" style="color:#fff;font-size: 18px;" slot="right">
            Next step
          </div>
        </x-header>
      </div>
    </div>
    <loading :show='showLoading'></loading>
    <toast v-model="showFail" type="warn" :time="800" is-show-mask text="您已经报过名了哦~" position="middle" width="20em"></toast>

  </div>

</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import {
  PopupPicker,
  Toast,
  Group,
  XInput,
  Divider,
  XButton,
  Selector,
  XHeader
} from "vux";
import { isCardNo, isHKMacao, isTaiwan, isPassport } from "@/common/js/main.js";
import Loading from "@/common/components/loading.vue";
// 获取选手是否已经参赛
import { postRegistrationInquiry } from "@/api/postRegistrationInquiry.js";
import { cookie } from "vux";

import mixin from "@/common/js/mixin.js";

import { countryData } from "@/common/locales/enCountryData.js";
import { pcenCountryDatas } from "@/common/locales/pcenCountryDatas.js";
import { indexedDB } from "@/api/indexedDB.js";
export default {
  props: ["page", "host"],
  data() {
    return {
      identity: "",
      IDNumber: "",
      checkDisabled: true,
      showLoading: false,
      showFail: false,
      wrongMsg: "",
      titleNationality: "Nationality",
      national: [],
      nationalList: countryData,
      pcOnlineNational: false,
      countryDataPC: "",
      raceId: "",
      idtype: "",
      eventId: ""
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {
    if (
      !window.localStorage.getItem("idtype") ||
      !window.localStorage.getItem("eventId")
    ) {
      this.$router.push({ path: "/" });
    }
  },
  created() {
    //创建前获取国籍地区信息，本地的语言包
    switch (window.localStorage.getItem("national")) {
      case "001":
        document.querySelector("html").lang = "zh-cn";
        this.$i18n.locale = "ZH";
        this.identity = "大陆";
        break;
      case "001071":
        document.querySelector("html").lang = "tw";
        this.$i18n.locale = "TW";
        this.identity = "台湾";
        break;
      case "001081":
        document.querySelector("html").lang = "tw";
        this.$i18n.locale = "TW";
        this.identity = "香港";
        break;
      case "001082":
        document.querySelector("html").lang = "tw";
        this.$i18n.locale = "TW";
        this.identity = "澳门";
        break;
      default:
        document.querySelector("html").lang = "en";
        this.$i18n.locale = "EN";
        this.identity = "外国";
    }

    //判断手机端还是PC
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.pcOnlineNational = false;

      //this.national = [];

      //this.national.push(window.localStorage.getItem("national"));
    } else {
      this.pcOnlineNational = true;
      this.countryDataPC = pcenCountryDatas;
      //this.national = window.localStorage.getItem("national");
    }

    this.idtype = window.localStorage.getItem("idtype");
    this.eventId = window.localStorage.getItem("eventId");

    this.pageType = window.localStorage.getItem("pageType");
  },
  mounted() {
    if (this.pageType == "baoming") {
      document.querySelector("#number").style.marginTop = "-20px";
    }
  },
  methods: {
    onClickMore() {
      this.drawerVisibility = true;
    },
    /*      checkHKMacao () {
       console.log()
       return isCardNo(this.number)
       },
       checkTaiwan () {
       return isCardNo(this.number)
       },
       checkPassport () {
       return isCardNo(this.number)
       },*/
    next(a) {
      let _this = this;
      if (this.IDNumber == "") {
        this.$vux.toast.show({
          type: "text",
          text: "请输入您的证件"
        });
        return;
      }

      //如果是外国人 且没有填国家
      if (a == 0) {
        //console.log(this.national)
        if (this.pcOnlineNational == true) {
          if (this.national == "") {
            this.$vux.toast.show({
              type: "warn",
              text: "Please choose your nationality"
            });
            return;
          }
          window.localStorage.setItem("national", this.national);
        } else {
          if (this.national.length == 0) {
            this.$vux.toast.show({
              type: "warn",
              text: "Please choose your nationality"
            });
            return;
          }
          window.localStorage.setItem("national", this.national[0]);
        }
      } else {
        if (a == "001" || a == "001081" || a == "001071") {
          window.localStorage.setItem("national", a);
        } else {
          if ((this.pcOnlineNational = false)) {
            window.localStorage.setItem("national", this.national);
          } else {
            window.localStorage.setItem("national", this.national[0]);
          }
        }
      }

      //console.log(this.national);

      //设置IDNumber
      window.localStorage.setItem("IDNumber", this.IDNumber);

      //indexedDB("IDNumber", "set", this.RACEID, this.IDNumber, function() {});
      // indexedDB(
      //   "national",
      //   "get",
      //   this.RACEID,
      //   "",
      //   function(a) {
      //     if (a == "0") {
      //       if (this.national.length == 1) {
      //         indexedDB(
      //           "national",
      //           "set",
      //           this.RACEID,
      //           this.national[0],
      //           function() {}
      //         );
      //       } else {
      //         indexedDB(
      //           "national",
      //           "set",
      //           this.RACEID,
      //           this.national,
      //           function() {}
      //         );
      //       }

      //       //console.log(this.national)
      //       if (this.national == "") {
      //         //this.wrongMsg = 'Please choose your nationality';
      //         //this.showFail = true;
      //         this.$vux.toast.show({
      //           type: "warn",
      //           text: "Please choose your nationality"
      //         });
      //         return false;
      //       }
      //     }
      //   }.bind(this)
      // );

      // 获取赛事列表
      /*     this.$vux.loading.show({
         text: '报名中'
         })*/

      if (!!window.localStorage.getItem("invitationCode")) {
        var conifg = {
          idnum: this.IDNumber,
          eventid: this.eventId,
          idtype: this.idtype,
          json: 1,
          invite: window.localStorage.getItem("invitationCode")
        };
      } else {
        var conifg = {
          idnum: this.IDNumber,
          eventid: this.eventId,
          idtype: this.idtype,
          json: 1
        };
      }

      postRegistrationInquiry(`${window.host}registration/exist`, conifg).then(
        response => {
          //this.$vux.loading.hide()
          if (response.data.code == "200") {
            window.sessionStorage.setItem(
              "defaultstate",
              response.data.data.defaultstate
            );

            //使用邀请码报名且有报名记录
            if (!!response.data.data.exist && response.data.data.exist == 1) {
              //console.log(this.IDNumber);
              window.localStorage.setItem("inviteID", this.IDNumber);
              _this.$router.push({ path: "/useinvite" });
              //_this.$router.push("/query");
              return;
            }

            if (response.data.data.info.length == 0) {
              //没有历史记录
              cookie.remove("historyMessage");
            } else {
              //有历史记录
              //console.log(response.data.data.info);
              cookie.set(
                "historyMessage",
                JSON.stringify(response.data.data.info)
              );
            }
            _this.$router.push({
              name: "form"
            });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg
            });
            //this.showLoading = false;
            //this.showFail = true;
            this.checkDisabled = true;
          }
        }
      );
    },
    _isCardNo: function(number) {
      this.checkDisabled = !isCardNo(number);
      return {
        valid: isCardNo(number),
        msg: "身份证格式不正确"
      };
    },
    _isHKMacao: function(number) {
      this.checkDisabled = !isHKMacao(number);
      return {
        valid: isHKMacao(number),
        msg: "港澳居住證格式不正確"
      };
    },
    _isTaiwan: function(number) {
      this.checkDisabled = !isTaiwan(number);
      return {
        valid: isTaiwan(number),
        msg: "臺灣港澳居住證格式不正確"
      };
    },
    _isPassport: function(number) {
      this.checkDisabled = !isPassport(number);
      return {
        valid: isPassport(number),
        msg: "The passport format is incorrect"
      };
    },
    onChangePC(val) {
      this.national = val;
    }
  },
  components: {
    Toast,
    Loading,
    PopupPicker,
    Group,
    XInput,
    Divider,
    XButton,
    Selector,
    XHeader
  },
  mixins: [mixin]
};
</script>

<style lang="less" rel="stylesheet/less">
#number button.weui-btn,
#body input.weui-btn {
  margin-top: 10px;
}

#number {
  margin-top: 30px;
}

.weui-wepay-flow__li {
  z-index: 0;
}
</style>
